import React, { Fragment } from 'react';
import { Layout, Menu } from 'antd';
import { withRouter,Link } from 'react-router-dom';
import { connect } from 'react-redux'
// import { TweenOneGroup } from 'rc-tween-one'
import { getSearchParams } from '&helpers/url';
import styles from './styles.module.less';
import logo from '../../static/images/header.jpg'

const { Sider } = Layout;
const { SubMenu } = Menu;


class SiderWidget extends React.Component {
    getMenu() {
        const { userInfo } = this.props;
        const searchParams = getSearchParams(location.search);
        const role = localStorage.getItem('role')
        console.log(role);
        // console.log(searchParams);
        switch (role) {
            case '单位管理员':
                return (
                    <Fragment>
                        <Menu.Item disabled>----管理员界面----</Menu.Item>
                        <Menu.Item key="/admin/member-list">成员列表</Menu.Item>
                        <Menu.Item key="/admin/alert-list">报警列表</Menu.Item>
                        <Menu.Item key="/admin/unit-list">单位列表</Menu.Item>
                        <SubMenu key="hotmaps_admin" title="热点图">
                            <Menu.Item key="/admin/new-hotMap">
                                新建热点图
                            </Menu.Item>
                            <Menu.Item key="/equipment">
                                全部热点图
                            </Menu.Item>
                        </SubMenu>
                        <Menu.Item key="/admin/setting">个人设置</Menu.Item>
                    </Fragment>
                )
            case '普通用户':
                return (
                    <Fragment>
                        <Menu.Item disabled>----用户界面界面----</Menu.Item>
                        <Menu.Item key="/equipment">查看热点图</Menu.Item>
                        {/* <Menu.Item key="/user/photo-album">临时图库</Menu.Item> */}
                        <Menu.Item key="/user/alert-list">报警列表</Menu.Item>
                        <Menu.Item key="/user/setting">个人设置</Menu.Item>
                    </Fragment>
                );
            default:
            return (
                <Fragment>
                        <Menu.Item disabled>----管理员界面----</Menu.Item>
                        <Menu.Item key="/admin/member-list">成员列表</Menu.Item>
                        <Menu.Item key="/admin/alert-list">报警列表</Menu.Item>
                        <Menu.Item key="/admin/unit-list">单位列表</Menu.Item>
                        <SubMenu key="hotmaps_admin" title="热点图">
                            <Menu.Item key="/admin/new-hotMap">
                                新建热点图
                            </Menu.Item>
                            <Menu.Item key="/equipment">
                                全部热点图
                            </Menu.Item>
                        </SubMenu>
                        <Menu.Item key="/admin/setting">个人设置</Menu.Item>
                    </Fragment>
            )
                return null;
        }
    }

    menuChange = (e) => {
        const { history, location, setTags, tagList } = this.props;
        let arr = [...tagList]
        if (arr) {
          
        }
        location.pathname = e.key;
        history.push(location);
    }

    componentDidMount() {
      const username = localStorage.getItem('name')
      if(localStorage.role == '普通用户') {
        this.props.userInfo({username:username})
      } else {
        this.props.adminInfo({username:username});
      }
      this.props.getBackImg();
    }

    render() {
        return (
            <Sider width="200" theme="light">
                <div className={ styles.logoContent }>
                    {/* 四川大学 */}
                    <div className={styles.logo}></div>
                    {/* <a >
                      <img className={ styles.logo } src={logo} />
                    </a> */}
                </div>
                <Menu
                    onClick={ this.menuChange }
                    mode="inline"
                    // theme="light"
                >
                    { this.getMenu() }
                </Menu>
            </Sider>
        )
    }
}

const mapStateToProps = (state) => ({ backImgList:state.equipmentPage.backImgList, userInfo: state.user, tagList: state.adminPage.tagList});
const mapDispatchToProps = dispatch => {
  return {
    getBackImg: dispatch.equipmentPage.getBackImg,
    setTags: dispatch.adminPage.setState,
    adminInfo: dispatch.user.adminInfo,
    userInfo: dispatch.user.userInfo,
  }
};
export default connect(
    mapStateToProps,
    mapDispatchToProps
)(withRouter(SiderWidget));
